






import React, { FC, useEffect, useRef , useState } from 'react'
import {
    Form,
    Input,
    Button,
    Space,
  } from 'antd-mobile'
import { ShowSuccess, ShowToast } from '@/utils/message'
import { history, Link, useSearchParams } from 'umi'
import { reg } from '@/utils/validate'
import CaptchaBtn from '@/components/CaptchaBtn'
import { Ajax } from '@/api/api'
import {useLocalStorageState,useSessionStorageState} from 'ahooks'
import { useLoginAuthPush } from '@/hooks/common'
const PhoneCom:FC<any> = ({
    children,
    flag
}) => {
    
    const [ loginAuthPush ] = useLoginAuthPush()
    const [form] = Form.useForm()
    const formRef:any = useRef()
    const [query] = useSearchParams()
    const [appName, setAppName] = useLocalStorageState<string | undefined | any>(
        'appName',  // key 
    )
    const [appToken, setAppToken] = useSessionStorageState<string | undefined | any>(
        'appToken',  // key 
    )
    const [appPhone, setAppPhone] = useLocalStorageState<string | undefined | any>(
        'appPhone',  // key 
    )
    const onFinish = async (value:any)=>{
        // flag true 修改 false 手机登录 

        let res:any = await Ajax.finduser({phone:value.phone})
        if(res.result){
            let res1:any = await Ajax.verifyCaptcha({
                phone:value.phone,
                captcha:value.captcha
            })
            if(res1.data){
                if(flag){
                    // 修改密码 找回密码 
                    let res2:any = await Ajax.changepass({
                        phone:value.phone,
                        password:value.password 
                    })
                    if(res2.code==200){
                        ShowSuccess('密码重置成功')
                        history.push("/login")
                    }
                }else{
                    // 验证成功
                    let res2:any = await Ajax.gettoken({
                        username:res.result.username,
                        phone:res.result.phone,
                        password:res.result.password,
                    })
                    if(res2.code==200){
                        setAppName(res.result.username)
                        setAppToken(res2.token)
                        setAppPhone(res.result.phone)
                        // history.push("/app/mine")
                        loginAuthPush()
                    }
                }
            }
        }else{
            ShowToast('手机号未注册,请先注册')
        }
    }
    const [phone, setPhone] = useState<any>('')

    useEffect(()=>{
        setPhone(query.get('phone')?query.get('phone'):appPhone)
        form.setFieldValue('phone',query.get('phone')?query.get('phone'):appPhone)
        
    },[])
    return (
        <Form
            layout='horizontal'
            form={form}
            ref={formRef}
            onFinish={onFinish}
            onFinishFailed={()=>ShowToast('校验失败')}
            
            footer={
                <div >
                    <Space block justify='around' >
                        <Button  style={{width:'3rem'}} type='submit' color='primary' size='small'>
                            {flag?'修改':'提交'}
                        </Button>
                        
                        <Button  style={{width:'3rem'}} type='reset' color='warning' size='small'>
                            重置
                        </Button>
                    </Space>                        
                </div>
            }
        >
            <Form.Header>欢迎使用验证码登录</Form.Header>
            
            
            <Form.Item
                name='phone'
                label='手机号'
                rules={[
                    { required: true, message: '手机号码不能为空' },
                    { pattern:reg.phone, message:'请输入格式正确的手机号码'}
                ]}
                hasFeedback
                
            >
                <Input onChange={setPhone} placeholder='请输入' clearable />
            </Form.Item>

                
            <CaptchaBtn
                // phone={form.getFieldValue('phone')}
                phone={phone}
            />

            {
                children 
            }
            
            
            <Form.Item>
                <div className="links">
                    <Link to='/reg' className="color1">注册</Link>
                    {
                        flag ? <Link to='/login' className="color2">登录</Link>
                        : <Link to='/findpass' className="color2">找回密码</Link>
                    }
                    
                </div>
            </Form.Item>
        </Form>
    )
}

export default PhoneCom